<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="dialogDetail.title"
    draggable
    close-icon="CloseBold"
    @close="closeDialog"
  >
    <el-descriptions class="margin-top" :column="itemSpan" :size="'large'" border>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">设备分类</div>
        </template>
        {{ ProjectCheckInDeviceTypeFilter(formData.type) }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">设备名称</div>
        </template>
        {{ formData.name }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">设备序列号</div>
        </template>
        {{ formData.code }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">进/出口</div>
        </template>
        {{ formData.inOut === 1 ? "进口" : "出口" }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">有效起始日期</div>
        </template>
        {{ formData.startDate }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">有效截至日期</div>
        </template>
        {{ formData.endDate }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">设备型号</div>
        </template>
        {{ formData.model }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">设备版本</div>
        </template>
        {{ formData.version }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right" :span="2">
        <template #label>
          <div class="cell-item">是否禁用</div>
        </template>
        <el-tag :type="formData.isDisable ? 'danger' : 'success'">{{ formData.isDisable ? "禁用" : "启用" }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label-align="right" :span="2">
        <template #label>
          <div class="cell-item">备注</div>
        </template>
        {{ formData.remark }}
      </el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <div class="dialog_footer">
        <el-button @click="closeDialog()">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick, computed } from "vue";
import { getCheckInDeviceInfo } from "@/api/system/device/index";
import { ProjectCheckInDeviceForm } from "@/api/system/device/types";
import { getDicts } from "@/store/modules/dict";
import { SocialCreditCodeBlur } from "@/utils/verify";

import { useScreen } from "@/store/modules/screen";

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenWidth = ref(900);
const itemSpan = ref(2);

function initScreen() {
  if (mobile.value === "mobile") {
    screenWidth.value = screenStore.screenWidth;
    itemSpan.value = 1;
  } else {
    screenWidth.value = 900;
    itemSpan.value = 2;
  }
}

const props = defineProps({
  dialogDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "新增设备信息",
      footBtn: "新增",
      id: 0,
    }),
  },
});

const emit = defineEmits(["sendDetailClose"]);

const loading = ref(false);
let visible = ref(props.dialogDetail.visible);
const formData = reactive<ProjectCheckInDeviceForm>({});
const addOrEditFormRef = ref(ElForm);

onMounted(async () => {
  initScreen();

  let tempFormData;
  if (props.dialogDetail.id) {
    loading.value = true;
    tempFormData = await getCheckInDeviceInfo(props.dialogDetail.id);
    console.log("tempFormData", tempFormData);
    tempFormData = tempFormData.data;
    Object.assign(formData, tempFormData);
    loading.value = false;
    tempFormData = null;
  }
});

/* 发送当前弹窗关闭 */
function sendDetailClose(query) {
  emit("sendDetailClose", query);
}

/**
 * 关闭弹窗
 */
function closeDialog(query) {
  visible.value = false;
  sendDetailClose(query);
  resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
  formData.id = undefined;
}

function DeviceTypeFilter(val) {
  let temp = DeviceType.filter((item) => item.value === val);
  if (temp && temp[0]) {
    return temp[0].label;
  } else {
    return "";
  }
}

function ProjectCheckInDeviceTypeFilter(val) {
  let temp = ProjectCheckInDeviceType.filter((item) => item.value === val);
  if (temp && temp[0]) {
    return temp[0].label;
  } else {
    return "";
  }
}

const DeviceType = getDicts("deviceType"); //设备分类
const ProjectCheckInDeviceType = getDicts("projectCheckInDeviceType"); //设备分类
</script>

<style lang="scss" scoped>
.cell-item {
  font-size: 15px;
  //font-weight: bold;
  color: #938d8d;
}
</style>
